<div class="row">
  <div class="col-md-12">

    <div id="content_header">
      <h3>Register a new Role Profile</h3>
    </div>

    <div class="row">
      <div class="col-md-12">
        <form name="countryForm" role="form" ng-submit="add()">

          <div class="row">
            <div class=" col-lg-4">
              <div class="form-group" ng-class="{ 'has-error': errors.Name}">
                <label class="required" for="Name">Name</label>
                <input type="text" name="Name" class="form-control" id="" placeholder="Input field" ng-model="item.Name" required>
                <error-widget field="errors.Name"></error-widget>
              </div>
            </div>
          </div>

          <h4>Roles</h4>

          <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="(key, controller) in ctrls">
              <h4>{{ key }}</h4>
              <div class="form-group" ng-repeat="role in controller">
                <label>
                  <input type="checkbox" ng-click="toggleRole(role)">
                  {{ role.Name }}
                </label>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary" >Submit</button>
        </form>
      </div>
    </div>

  </div>
</div>